import React from 'react';
import 'antd/dist/antd.css';
import './Forum.css';
import { Comment, Avatar, Form, Button, List, Input, Pagination, message } from 'antd';
import moment from 'moment';
import { connect } from 'react-redux';
import axios from '_axios@0.21.1@axios';

const { TextArea } = Input;

const CommentList = ({ comments, total }) => (
  <List
    dataSource={comments}
    header={`共${total}条评论`}
    itemLayout="horizontal"
    renderItem={props => <Comment {...props} />}
  />
);

const Editor = ({ onChange, onSubmit, submitting, value }) => (
  <>
    <Form.Item>
      <TextArea rows={4} onChange={onChange} value={value} />
    </Form.Item>
    <Form.Item>
      <Button htmlType="submit" loading={submitting} onClick={onSubmit} type="primary">
        发布
      </Button>
    </Form.Item>
  </>
);

class App extends React.Component {
  state = {
    comments: [],
    submitting: false,
    value: '',
    pagination: {
      pageNo: 1,
      pageSize: 4,
    },
    total:0
  };

  componentDidMount = () => {
    this.getData().then((res) => {
      this.setState({
        total: res.data.total,
        comments: res.data?.rows?.map((value, index, array) => {
          return {
            key:value.key,
            author: value.username,
            avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
            content: value.content,
            datetime: moment(value.time).fromNow(),
          }
        })
      })
    })
  }

  getData = (param = this.state.pagination) => {
    return axios.post('http://127.0.0.1:8080/tcomment/query', param)
  }

  handleSubmit = () => {
    if (!this.state.value) {
      return;
    }

    this.setState({
      submitting: true,
    });

    axios.post('http://127.0.0.1:8080/tcomment/create',{
      id: this.props.id,
      content: this.state.value
    }).then(()=>{
      this.getData().then((res) => {
      
        this.setState({
          submitting: false,
          total: res.data.total,
          comments: res.data?.rows?.map((value, index, array) => {
            console.log("key",value.id+value.time)
            console.log(value.time.toString())
            return {
              key:value.key,
              author: value.username,
              avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
              content: value.content,
              datetime: moment(value.time).fromNow(),
            }
          })
        })
        message.success("评论发布成功");
      })
    })


    this.setState({
      value:"",
    })
  }

  onChange = (pageNo, pageSize)=>{
    console.log(pageNo,pageSize, this.state.total)
    this.setState({
      pagination:{
        pageNo:pageNo,
        pageSize: 4,
      }
    })
    this.getData({
      pageNo:pageNo,
      pageSize: 4,
    }).then((res) => {
      this.setState({
        submitting: false,
        total: res.data.total,
        comments: res.data?.rows?.map((value, index, array) => {
          return {
            key:value.key,
            author: value.username,
            avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
            content: value.content,
            datetime: moment(value.time).fromNow(),
          }
        })
      })

    })
  }

  handleChange = e => {
    this.setState({
      value: e.target.value,
    });
  };

  render() {
    const { comments, submitting, value, total } = this.state;

    return (
      <>
        {comments?.length > 0 && <CommentList comments={comments} total={total} />}
        <Pagination showQuickJumper defaultCurrent={1} total={this.state.total} onChange={this.onChange} pageSize={4} />
        {<Comment
          avatar={
            <Avatar
              src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
              alt={this.props.username}
            />
          }
          content={
            <Editor
              onChange={this.handleChange}
              onSubmit={this.handleSubmit}
              submitting={submitting}
              value={value}
            />
          }
        />}
      </>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    username: state?.username,
    id: state?.id
  }
}

export default connect(mapStateToProps)(App);